<template>
  <div>
    <div>
      <ButtonGroup>
        <Button type="primary" v-if="menuManager_btn_add" @click="handleAdd" icon="ms-add">添加</Button>
        <Button type="primary" v-if="menuManager_btn_edit" @click="handleEdit" icon="ms-edit">编辑</Button>
        <Button type="primary" v-if="menuManager_btn_del" @click="handleDelete" icon="ms-delete">删除</Button>
      </ButtonGroup>
    </div>
    <Row>
      <Col span="6">
        <Card>
          <Input placeholder="输入关键字搜索" class="search-input" v-model="filterText" />
          <Tree :data="treeData" ref="menuTree" @on-select-change="getNodeData" :render="renderContent"></Tree>
        </Card>
      </Col>
      <Col span="18">
        <Card>
          <Form ref="form" :model="form" :label-width="100">
            <FormItem label="路径编码" prop="code">
              <Input v-model="form.code" :disabled="formEdit" placeholder="请输入路径编码"></Input>
            </FormItem>
            <FormItem label="标题" prop="title">
              <Input v-model="form.title" :disabled="formEdit" placeholder="请输入标题"></Input>
            </FormItem>
            <FormItem label="父级节点" prop="parentId">
              <Input v-model="form.parentId" :disabled="formEdit" readonly></Input>
            </FormItem>
            <FormItem label="图标" prop="icon">
              <Input v-model="form.icon" :disabled="formEdit" placeholder="请输入图标"></Input>
            </FormItem>
            <FormItem label="资源路径" prop="href">
              <Input v-model="form.href" :disabled="formEdit" placeholder="请输入资源路径"></Input>
            </FormItem>
            <FormItem label="类型" prop="type">
              <Select class="filter-item" v-model="form.type"  :disabled="formEdit"  placeholder="请输入资源请求类型">
                <Option v-for="item in typeOptions" :key="item.id" :label="item.labelDefault" :value="item.value"> </Option>
              </Select>
            </FormItem>
            <FormItem label="排序" prop="orderNum">
              <Input v-model="form.orderNum" :disabled="formEdit" placeholder="请输入排序"></Input>
            </FormItem>
            <FormItem label="描述" prop="description">
              <Input v-model="form.description" :disabled="formEdit" placeholder="请输入描述"></Input>
            </FormItem>
            <FormItem label="前端组件" prop="attr1">
              <Input v-model="form.attr1" :disabled="formEdit" placeholder="请输入前端组件"></Input>
            </FormItem>
            <FormItem v-if="formStatus == 'update'">
              <Button type="primary" @click="update">更新</Button>
              <Button @click="onCancel">取消</Button>
            </FormItem>
            <FormItem v-if="formStatus == 'create'">
              <Button type="primary" @click="create">保存</Button>
              <Button @click="onCancel">取消</Button>
            </FormItem>
          </Form>
        </Card>
        <Card title="按钮或资源">
          <menu-element :menuId='currentId' ref="menuElement"></menu-element>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
import {
  fetchTree, getObj, addObj, delObj, putObj
} from '@/api/admin/menu/index'
import { mapGetters } from 'vuex'
import { getTypeValue } from '@/api/dict/dictValue/index'
import menuELement from './components/menuElement'
import { convertTree } from '@/libs/util'
export default {
  components: {
    'menu-element': menuELement
  },
  data () {
    return {
      filterText: '',
      list: null,
      total: null,
      formEdit: true,
      formAdd: true,
      formStatus: '',
      showElement: false,
      typeOptions: [],
      listQuery: {
        name: undefined
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      labelPosition: 'right',
      form: {
        code: undefined,
        title: undefined,
        parentId: undefined,
        href: undefined,
        icon: undefined,
        orderNum: undefined,
        description: undefined,
        path: undefined,
        enabled: undefined,
        type: 'authority_menu_menu',
        attr1: undefined
      },
      currentId: -1,
      menuManager_btn_add: false,
      menuManager_btn_edit: false,
      menuManager_btn_del: false
    }
  },
  watch: {
    filterText (val) {
      this.$refs.menuTree.filter(val)
    }
  },
  created () {
    this.getList()
    this.menuManager_btn_add = this.elements['menuManager:btn_add']
    this.menuManager_btn_del = this.elements['menuManager:btn_del']
    this.menuManager_btn_edit = this.elements['menuManager:btn_edit']
    getTypeValue('authority_menu').then(response => {
      this.typeOptions = response.data.rows
    })
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    renderContent (h, { root, node, data }) {
      return h('span', {
        class: {
          'ivu-tree-title': true
        },
        on: {
          click: () => {
            this.getNodeData(data, node)
          }
        }
      }, data.title)
    },
    getList () {
      fetchTree(this.listQuery).then(data => {
        const map = {
          value: 'id',
          label: 'label',
          children: 'children'
        }
        this.treeData = convertTree(data, map)
      })
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getNodeData (data, node) {
      if (!this.formEdit) {
        this.formStatus = 'update'
      }
      getObj(data.id).then(response => {
        this.form = response.data
      })
      this.$set(data, 'expand', !data.expand)
      this.currentId = data.id
      this.showElement = true
      this.$refs.menuElement.menuId = data.id
      this.$refs.menuElement.getList()
    },
    handleEdit () {
      if (this.form.id) {
        this.formEdit = false
        this.formStatus = 'update'
      }
    },
    handleAdd () {
      this.resetForm()
      this.formEdit = false
      this.formStatus = 'create'
    },
    handleDelete () {
      this.$Modal.confirm({
        title: '提示',
        content: '此操作将永久删除, 是否继续?',
        onOk: () => {
          delObj(this.currentId).then(() => {
            this.getList()
            this.resetForm()
            this.onCancel()
            this.$Notice.success({
              title: '成功',
              message: '删除成功'
            })
          })
        }
      })
    },
    update () {
      putObj(this.form.id, this.form).then(() => {
        this.getList()
        this.$Notice.success({
          title: '成功',
          message: '更新成功'
        })
      })
    },
    create () {
      addObj(this.form).then(() => {
        this.getList()
        this.$Notice.success({
          title: '成功',
          message: '创建成功'
        })
      })
    },
    onCancel () {
      this.formEdit = true
      this.formStatus = ''
    },
    resetForm () {
      this.form = {
        code: undefined,
        title: undefined,
        parentId: this.currentId,
        href: undefined,
        icon: undefined,
        orderNum: undefined,
        description: undefined,
        path: undefined,
        enabled: undefined
      }
    }
  }
}
</script>
